<template>
  <el-row class="login-bg" :style="{backgroundImage:backgroundImage}">
    <el-row class="login center-vertical">
      <el-card class="login-card" body-class="p-b-5">
        <el-row class="login-title">
          <span class="m-r-10 f18">眼镜蛇后台管理系统</span><span class="f-12">v1.0</span>
        </el-row>
        <el-row class="m-t-30">
          <el-col :span="2" class="center-vertical">
            <span class="iconfont iaiai-account-outline f22"></span>
          </el-col>
          <el-col :span="21">
            <el-input v-model="account" placeholder="账号" maxlength="50" />
          </el-col>
        </el-row>
        <el-row class="m-t-20">
          <el-col :span="2" class="center-vertical">
            <span class="iconfont iaiai-lock f20"></span>
          </el-col>
          <el-col :span="21">
            <el-input type="password" v-model="password" show-password placeholder="密码" maxlength="50" />
          </el-col>
        </el-row>
        <el-row class="m-t-30 center-flex">
          <el-button type="primary" style="width: 100px" @click="login" :loading="loading">登录</el-button>
        </el-row>

        <el-row class="copyright center-text m-t-30">
          {{$system.copyright}}<br/>{{$system.companyName}}
        </el-row>
      </el-card>
    </el-row>
  </el-row>
</template>

<script lang="ts" setup>
import {inject, onMounted, ref} from "vue"
import {useRouter} from "vue-router"
import {setToken} from "@/core/util/app_util"

const $post = inject('$post')
const $api = inject('$api')
const router = useRouter()

const backgroundImage = ref("")
const account = ref("")
const password = ref("")
const loading = ref(false)

onMounted(()=>{
  backgroundImage.value = getBackageImage()
})

function getBackageImage() {
  return 'url(' + require('../assets/login/login' + (Math.floor(Math.random() * 3) + 1) + '.jpg') + ')'
}

function login(){
  loading.value = true

  $post($api.login,{
    "account": account.value,
    "password": password.value,
  }).then((res:any)=>{
    setToken(res.data.result.token)
    router.push("/home")
  }).catch(err=>{
    loading.value = false
  })
}
</script>

<style lang="scss" scoped>
.login-bg {
  background-size: cover;
  background-position: 50%;

  width: 100%;
  height: 100%;
}

.login{
  position: absolute;
  top: 0;
  right: 150px;
  bottom: 0;

  .login-card{
    width: 400px;

    .login-title{
      vertical-align: bottom;
      display:table-cell;

      span{
        vertical-align: baseline;
      }
    }

    .copyright {
      width: 100%;
      text-align: center;
      color: #c3c3c3;
      font-size: 10px;
    }
  }
}
</style>
